<title>灯箱</title>

<link rel="stylesheet" href="/vendor/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="/css/examples/components/advanced/lightbox.css">

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">Lightbox</h1>
        <div class="page-header-actions">
            <a class="btn btn-inverse btn-round" href="http://dimsemenov.com/plugins/magnific-popup/" target="_blank">
                <i class="icon wb-link" aria-hidden="true"></i> <span class="hidden-xs">官网</span></a>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">灯箱</h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">单个图片</h4>
                            <p>通过 3 个示例来演示不同的缩放效果。 <br> 1 — 水平和垂直方向结合 <br> 2 — 仅垂直方向 <br> 3 — 使用缩放动画，关闭按钮在页面右上角 </p>
                            <div class="example">
                                <a class="inline-block" href="/images/photos/animal-1.jpg" data-plugin="magnificPopup" data-main-class="mfp-img-mobile">
                                    <img class="img-responsive" src="/images/photos/animal-1.jpg" alt="..." width="220">
                                </a>
                                <a class="inline-block" href="/images/photos/animal-2.jpg" data-plugin="magnificPopup">
                                    <img class="img-responsive" src="/images/photos/city-2.jpg" alt="..." width="220">
                                </a>
                                <a class="inline-block" href="/images/photos/animal-3.jpg" data-plugin="magnificPopup" data-close-btn-inside="false" data-fixed-contentPos="true" data-main-class="mfp-margin-0s mfp-with-zoom" data-zoom='{"enabled": "true","duration":"300"}'>
                                    <img class="img-responsive" src="/images/photos/animal-3.jpg" alt="..." width="220">
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">相册</h4>
                            <p>示例中同时使用了图片懒加载。</p>
                            <div class="example" id="exampleGallery">
                                <a class="inline-block" href="/images/photos/view-4.jpg" title="view-4">
                                    <img class="img-responsive" src="/images/photos/view-4.jpg" alt="..." width="220">
                                </a>
                                <a class="inline-block" href="/images/photos/view-2.jpg" title="view-5">
                                    <img class="img-responsive" src="/images/photos/view-2.jpg" alt="..." width="220">
                                </a>
                                <a class="inline-block" href="/images/photos/view-3.jpg" title="view-6">
                                    <img class="img-responsive" src="/images/photos/view-3.jpg" alt="..." width="220">
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">缩放</h4>
                            <div class="example" id="exampleZoomGallery">
                                <a class="inline-block" href="/images/photos/view-7.jpg" title="view-7" data-source="/images/photos/view-7.jpgg">
                                    <img class="img-responsive" src="/images/photos/view-7.jpg" alt="..." width="220">
                                </a>
                                <a class="inline-block" href="/images/photos/view-8.jpg" title="view-8" data-source="/images/placeholder-gray.png">
                                    <img class="img-responsive" src="/images/photos/view-8.jpg" alt="..." width="220">
                                </a>
                                <a class="inline-block" href="/images/photos/view-9.jpg" title="view-9" data-source="/images/photos/view-9.jpg">
                                    <img class="img-responsive" src="/images/photos/view-9.jpg" alt="..." width="220">
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">动画</h4>
                            <div class="example example-buttons">
                                <a class="popup-with-css-anim btn btn-primary btn-outline" href="/images/photos/people-3.jpg" data-effect="mfp-zoom-in">
                                    Zoom
                                </a>
                                <a class="popup-with-css-anim btn btn-primary btn-outline" href="/images/photos/people-3.jpg" data-effect="mfp-newspaper">
                                    Newspaper
                                </a>
                                <a class="popup-with-css-anim btn btn-primary btn-outline" href="/images/photos/people-3.jpg" data-effect="mfp-move-horizontal">
                                    Horizontal move
                                </a>
                                <a class="popup-with-css-anim btn btn-primary btn-outline" href="/images/photos/people-3.jpg" data-effect="mfp-move-from-top">
                                    Move from top
                                </a>
                                <a class="popup-with-css-anim btn btn-primary btn-outline" href="/images/photos/people-3.jpg" data-effect="mfp-3d-unfold">
                                    3d unfold
                                </a>
                                <a class="popup-with-css-anim btn btn-primary btn-outline" href="/images/photos/people-3.jpg" data-effect="mfp-zoom-out">
                                    Zoom-out
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-lg-block visible-md-block"></div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">视频 / 地图</h4>
                            <div class="example example-buttons">
                                <a class="popup-youku btn btn-primary btn-outline" href="http://player.youku.com/player.php/sid/XMTY1ODUwNjQ5Ng==/v.swf">
                                    优酷视频
                                </a>
                                <a class="popup-tengxun btn btn-primary btn-outline" href="http://static.video.qq.com/TPout.swf?vid=f032637d8g4&auto=0">
                                    腾讯视频
                                </a>
                                <a class="popup-baidumaps btn btn-primary btn-outline" href="http://maps.baidu.com/">
                                    百度地图
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">表单</h4>
                            <div class="example">
                                <a class="btn btn-primary btn-outline" id="examplePopupForm" href="#exampleForm">打开表单
                                </a>

                                <form class="mfp-hide lightbox-block" id="exampleForm">
                                    <h1>表单</h1>
                                    <p>灯箱有一个选项可以设置弹出表单的第一个表单项自动获得焦点。</p>
                                    <div class="form-group">
                                        <label class="control-label" for="inputName">姓名</label>
                                        <input type="text" class="form-control" id="inputName" name="name" placeholder="姓名" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="inputEmail">Email</label>
                                        <input type="email" class="form-control" id="inputEmail" name="email" placeholder="example@admin.com" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="inputPhone">电话</label>
                                        <input type="tel" class="form-control" id="inputPhone" name="phone" placeholder="请输入电话号码" required>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="textarea">个人简介</label>
                                        <br>
                                        <textarea class="form-control" id="textarea">个人简介…</textarea>
                                    </div>
                                </form>

                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-lg-block visible-md-block"></div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">Ajax</h4>
                            <p>您可以根据需要使用 CSS 动画。</p>
                            <div class="example example-buttons">
                                <a class="btn btn-primary btn-outline" id="examplePopupAjaxAlignTop" href="/data/examples/components/lightbox-test-ajax.tpl">
                                    加载 ajax 内容
                                </a>
                                <a class="btn btn-primary btn-outline" id="examplePopupAjax" href="/data/examples/components/lightbox-test-ajax-2.tpl">
                                    加载另一个 ajax 内容
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">模态框</h4>
                            <p>下面是一个模态框示例</p>
                            <div class="example">
                                <a class="popup-modal btn btn-primary btn-outline" href="#exampleModal">打开模态框</a>
                                <div class="mfp-hide lightbox-block" id="exampleModal">
                                    <h1>模态框</h1>
                                    <p>赛灵思已经宣布收购在卷积神经网络领域有独到研究的Auviz Systems公司，这家成立仅三年的公司，专注于数据中心和嵌入式系统的加速应用。Auviz
                                        Systems致力于为行业提供基于FPGA的中间件IP，以减少应用程序的功耗。 </p>
                                    <p class="margin-top-10">
                                        <a class="popup-modal-dismiss" href="javascript:;">关闭</a>
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-lg-block visible-md-block"></div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">错误处理</h4>
                            <p>以下示例演示了基本的错误提示，您也可以自定义文本和样式。</p>
                            <div class="example example-buttons">

                                <a class="mfp-image btn btn-primary btn-outline" id="exampleBrokenImage" href="http://upload.example.com/xxx.jpg">
                                    错误的图片地址
                                </a>
                                <a class="mfp-ajax btn btn-primary btn-outline" id="exampleBrokenAjax" href="http://example.com/ajax-content">
                                    错误的 Ajax 请求
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/vendor/magnific-popup/jquery.magnific-popup.min.js" data-name="popup"></script>
<script src="/js/examples/components/advanced/lightbox.js" data-deps="popup"></script>
